@import "common.less";

.list{min-height: 1336/@rem;position: relative; background: url("../img/bg-sign.jpg") #140f29 no-repeat; background-size: contain;
  //&:before {content: ''; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 50%; max-width:@sreen; margin-left:-250px;}
  .head{width:640/@rem; margin:0 auto; z-index: 1; position:relative;
    .count{color:#fff; font-size:32/@rem; position:absolute; top:80/@rem; left:150/@rem;
      span{font-size:60/@rem; display:block;}
    }
  }
  .content{width:640/@rem; margin:-100/@rem auto 0; z-index: 2;min-height: 960/@rem;border-radius: 10px; position:relative; z-index:2;
    &>div{background-color: lighten(#4954a2,7.5%);}
    &.youth{
      &>div{background-color:lighten(#c5385b,7%);}
      .total{
        div{border-color:#e894a4; color:#f1aeb8;
          &:last-child{border-color:#e894a4;}
        }
      }
      .minitab{
        li{background:#a62a44; color:#c8939a;
          &.active{background:#cb395a; color:#fff;}
        }
      }
      .search{
        input{border-color:#f97288; color:#ffd1d5;
          &::-webkit-input-placeholder{color:#ffd1d5;}
        }
        button{color:#9e2f3a; background:#f2a5a8;}
      }
      .list-area,.search-area{
        .deckgrid{
          .li{border-color:#b62a4d; background:#b62a4d;
            button{background:url("../img/vote-bg2.jpg") 0 0/contain;}
          }
        }
      }
    }

    .minitab{
      overflow:hidden;
      li{width: 319/@rem; margin-left:2/@rem; float: left; font-size: 32/@rem; text-align: center; background:#2a3477; color:#838fdf; height:75/@rem; line-height:80/@rem; margin-top:10/@rem; border-radius:10px 10px 0 0;
        &:first-child{margin-left:0;}
        &.active{background:#5965b6; color:#fff; height: 100%; height:85/@rem; line-height:85/@rem; margin-top:0;}
      }
    }
    .total{overflow:hidden; color:#fff; text-align:center; margin-bottom:38/@rem; border-radius:0 0 10px 10px;
      div{float:left; width:33%; border-left:1px #6771be solid; margin:20/@rem 0 15/@rem; color:#838fdf; font-size:18/@rem;
        i{display:block; width:50/@rem; height:50/@rem; margin:0 auto 5/@rem;
          &.count{background: url("../img/list-count.png") 50% 50%/contain no-repeat;}
          &.voteman{background: url("../img/list-voteman.png") 50% 50%/contain no-repeat;}
          &.browse{background: url("../img/list-browse.png") 50% 50%/contain no-repeat;}
        }
        span{font-size:36/@rem; display:block; line-height:40/@rem; color:#fff;}
        &:first-child{border-left:none;}
        /*&:last-child{float:none; overflow:hidden; width:100%; border-top:1px #6771be solid; border-left:none;}
        &.time{font-size:60/@rem; margin:0; color:#fff; padding: 25/@rem 0;
          span{font-size:32/@rem; display:block; line-height:60/@rem;}
        }*/
      }
    }
    .content_con{padding-top:30/@rem;}
    .search{margin:0 auto 30/@rem; width:568/@rem; height:69/@rem; position:relative;
      input{width:100%; height:100%; color:#838fdf; border-radius:34.5/@rem; background:none; border:1px #8590da solid; text-indent:30/@rem; font-size:24/@rem;
        &::-webkit-input-placeholder{color:#838fdf;}
      }
      button{position:absolute; right:-1px; text-align:center; top:1px; height:100%; color:#b9c1f9; font-size:32/@rem; width:154/@rem; border-radius:32.5/@rem; border:none; background:#7b87dd;}
    }
    .list-area,.search-area{padding:20/@rem; overflow:hidden; padding-bottom:150/@rem;
      .deckgrid{ margin-bottom:10/@rem;
        .li{text-align:center; border:5/@rem #3c4794 solid; margin-bottom:40/@rem; overflow:hidden; background:#3c4794; position:relative;
          a{display: block; position:relative; min-height:200/@rem;}
          img{min-width:100%; vertical-align:bottom;}
          p{position:absolute; width:100%; height:60/@rem; line-height:60/@rem; left:0; bottom:0; background:rgba(0,0,0,0.8); color:#fff;}
          em{margin-left:15/@rem; font-style:normal;}
          button{display:block; width:100%; height:60/@rem; color:#fff; background:url("../img/vote-bg.jpg") 0 0/contain; border:none;
            i{display:inline-block; width:23/@rem; height:23/@rem; background:url("../img/button-vote.png") 0 0/contain; vertical-align:-2/@rem; margin-right:5/@rem;}
          }
          .animated{position:absolute; bottom:0; right:10/@rem; height:60/@rem; line-height:70/@rem; color:#fff;}
        }
      }
      .more{display:block; text-align:center; color:#fff;clear: both;
        img{vertical-align:-6/@rem; width:25/@rem; margin-right:10/@rem; animation:moreload 1s linear infinite; -webkit-animation:moreload 1s linear infinite;}
      }
    }
  }
  .title{
    height: 90/@rem;
    li{width: 50%;float: left;font-size: 20/@rem;text-align: center;height: 100%;
      .name{font-size: 36/@rem;margin-top: 2/@rem;}
      &.create{background: url("../img/title-blue.jpg") repeat-x;background-size: auto 100%;color: #c3c9ff;border-radius:10px 0 0 0;
        &.active{background: url("../img/title-blue-active.jpg") repeat-x;background-size: auto 100%;}
      }
      &.youth{background: url("../img/title-red.jpg") repeat-x;background-size: auto 100%;color: #ffd1d5;border-radius:0 10px 0 0;}
      &.active{background: url("../img/title-red-active.jpg") repeat-x;background-size: auto 100%;}
    }
  }

  @keyframes moreload{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  @-webkit-keyframes moreload{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
}

.deckgrid{overflow: hidden;
  &[deckgrid]::before {
    /* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' */
    content: '2 .column.column-1-2';
    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
    visibility: hidden;
  }
  .column{float: left;
    &:nth-child(2n){float: right;}
  }
  .column-1-2{
    width: 48%;position: relative;
    img{width: 100%;display: block;}
    p{position:absolute; width:100%; height:60/@rem; line-height:60/@rem; left:0; bottom:0; background:rgba(0,0,0,0.8); color:#fff;}
    em{margin-left:15/@rem; font-style:normal;}
  }
}